<template>
  <view class="m-picker-view">
    <view @tap="tap" class="picker-slot-view">
      <slot>
        <input :value="modelValue" :disabled="true" :placeholder="placeholder"/>
      </slot>
    </view>
    <van-popup
      :show="show"
      :overlay="true"
      :round="true"
      position="bottom"
      @close="close"
    >
      <van-datetime-picker
        :type="type"
        :value="value"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirm"
        @cancel="clear"
        cancel-button-text="清空"
      />
    </van-popup>
  </view>
</template>
<script setup>
import {computed, ref, watch, watchEffect} from 'vue'
import {DateFormat} from '../../utils'
const props = defineProps({
  modelValue: {
    required: true,
    type: Array,
    default: () => []
  },
  minDate: {
    default: () => new Date('1969').getTime()
  },
  maxDate: {
    default: () => new Date('2999').getTime()
  },
  type: {
    type: String,
    default: () => 'date',
    validator: value => {
      return [ 'date', 'time', 'datetime', 'year-month'].includes(value)
    }
  },
  format: {
    type: String,
    default: () => ''
  },
  placeholder: {
    type: String,
    default: () => ''
  },
})
const emit = defineEmits(['update:modelValue', 'tap', 'change'])
const show = ref(false)
const value = ref()
setValue(props.modelValue)
watchEffect(() => {
  setValue(props.modelValue)
})

const minDate = computed(() => {
  const val = new Date(props.minDate).getTime()
  if (isNaN(val)) {
    return new Date('1969-01-01').getTime()
  }
  return val
})
const maxDate = computed(() => {
  const val = new Date(props.maxDate).getTime()
  if (isNaN(val)) {
    return new Date('2099-01-01').getTime()
  }
  return val
})

const compData = computed(() => {
  if (!value.value && value.value !== 0) return {}
  let modelValue, label
  if (['date', 'datetime', 'year-month'].includes(props.type)) {
    const format = props.format || {
      'date': 'yyyy-MM-dd',
      'datetime': 'yyyy-MM-dd hh:mm:ss',
      'year-month': 'yyyy-MM',
    }[props.type]
    const val = new DateFormat(format).format(new Date(value.value))
    modelValue = val
    label = val
  } else if (props.type === 'time') {

  }
  return {
    modelValue,
    label,
  }
})

function tap() {
  show.value = true
}

function change(e) {
  value.value = e.detail.value
  toEmit()
}

function close() {
  show.value = false
}

function confirm(e) {
  close()
  value.value = e.detail
  toEmit()
}

function clear() {
  emit('update:modelValue', '')
  close()
}

/**
 * 设置value的值
 * @param modelValue
 */
function setValue(modelValue) {
  value.value = new Date(modelValue).getTime()
  isNaN(value.value) && (value.value = new Date().getTime())
}

function toEmit() {
  emit('update:modelValue', compData.value.modelValue)
  emit('change', compData.value.modelValue)
}
</script>
<style lang="scss">
.m-picker-view {
  background-color: white;
  display: flex;
  flex-grow: 1;

  .picker-slot-view {
    flex-grow: 1;
  }
}
</style>
